<template>
  <div class="paySuccess">

<!--支付成功信息展示-->
    <div class="paySuccessInfo">
      <div class="icon_success">
        <van-icon name="checked" />
      </div>
      <h4>支付成功</h4>
      <div class="successBack">
        您的包裹整装待发,请留意
        <router-link to="/order">我的订单</router-link>
        另外祝您生活愉快 感谢您的支持与厚爱
      </div>
    </div>

    <div style="padding:10px 0;">
      <van-row>
        <van-col span="12">
          <van-button  style="padding:0 10px;height:auto;line-height:30px;" @click="orderDetail(payOrder.id,payOrder)">
            查看订单
          </van-button>
        </van-col>
        <van-col span="12">
          <van-button  style="padding:0 10px;height:auto;line-height:30px;" @click="homeFn">
            返回首页
          </van-button>
        </van-col>
      </van-row>
    </div>

    <!--推荐商品展示-->
    <div style="margin-top:10px;display: none">
      <div class="tuijian">
        <p style="font-size:18px;font-weight: bold;color:#F37015;margin:5px 0;">推荐榜</p>
        <div class="border:1px solid;">
          <van-row>
            <van-col span="12" style="padding:3px;border:1px solid #ccc;background: #fff;" v-for="(item,index) in shoplist" :key="index" @click.native="shopDetailsFn(item)">
              <img :src="item.imgPath" style="width:100%;" alt="">
              <p style="word-break: break-word;margin:5px 0;font-size:14px;">{{item.title}}</p>
              <p style="margin:0;text-align: left;font-size:16px;font-weight: bold;color:#F37015">￥{{item.price}}</p>
            </van-col>
          </van-row>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  export default{
    name:'paySuccess',
    data(){
      return{
        shoplist:[
          {
            imgPath:'/static/img/1.9314730.jpg',
            title:'潮流夹克衫休闲宽松学生帅气牛仔衣男士原宿bf风外套',
            price:201,
          },
          {
            imgPath:'/static/img/1.9314730.jpg',
            title:'潮流夹克衫休闲宽松学生帅气牛仔衣男士原宿bf风外套',
            price:201,
          },
          {
            imgPath:'/static/img/1.9314730.jpg',
            title:'潮流夹克衫休闲宽松学生帅气牛仔衣男士原宿bf风外套',
            price:201,
          },
          {
            imgPath:'/static/img/1.9314730.jpg',
            title:'潮流夹克衫休闲宽松学生帅气牛仔衣男士原宿bf风外套',
            price:201,
          }
        ],
        payOrder:{},
      }
    },
    methods:{
      onClickLeft(){
        this.$router.go(-1);
      },
      // 订单详情
      orderDetail(idx,obj){
        // console.log(idx,obj)
        this.$router.push({name:'orderDetail',params:{
            orderId:idx,
            obj:obj
          }
        })
      },
      //首页
      homeFn(){
        this.$router.push({ name: "home"});
      },
      //获取cookie
      getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == ' ') c = c.substring(1);
          if (c.indexOf(name) != -1){
            return c.substring(name.length, c.length);
          }
        }
        return "";
      },
      // 清楚cookie
      delCookie (name) {
        var exp = new Date();
        exp.setTime(exp.getTime() - 1);
        var cval = this.getCookie(name);
        if (cval != null)
          document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
      }
    },
    mounted(){
      //获取订单信息
      // var orderDetail = JSON.parse(this.getCookie('payOrder'));
      // console.log(orderDetail)

      if(this.$route.params.order){
        document.cookie = 'payOrderSuccess' + "=" + JSON.stringify(this.$route.params.order);
        this.payOrder = this.$route.params.order;
      }

      // console.log(this.payOrder)
    }
  }
</script>

<style scoped>
  .paySuccessInfo{
    padding-top: 1.45rem;
    text-align: center;
  }
  .icon_success{
    margin-top: 2rem;
    font-size: 2.8rem;
    color: #52b838;
  }
  .successBack{
    width: 80%;
    margin: .5rem auto;
    text-align: center;
    font-size: 14px;
  }
</style>
